import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { HashRouter, Match, Miss, Link } from 'react-router'
import { getGlobalDispatcher, ComponentProps, ComponentState, Component } from 'react-channel'
import { Home } from './home'
import { Message, MessageNew, MessageEdit } from './message'

export class App extends Component<ComponentProps, ComponentState> {
  render() {
    return (
      <HashRouter>
        <div className="page">
          <nav className="page-nav">
            <Link to="/" activeClassName="active" activeOnlyWhenExact>Home</Link><br />
            <Link to="/message/new" activeClassName="active">Create New Message</Link><br /><br />
          </nav>
          
          <div className="page-content">
            <Match exactly pattern="/" component={Home} />
            <Match exactly pattern="/message"  component={Message} />
            <Match exactly pattern="/message/new"  component={MessageNew} />
            <Match exactly pattern="/message/edit"  component={MessageEdit} />
          </div>
        </div>
      </HashRouter>
    )
  }
}

window.addEventListener('load', () => {
  ReactDOM.render(<App/>, document.getElementById('wrapper'))}, false)
